import React from 'react'
import Css from '../../style/common.module.css'
import Fanhui from '../../img/返回.png'
import Dianzan from '../../img/点赞.png'
import Dianzanhou from '../../img/点赞后.png'
import Pinglun from '../../img/评论.png'
import More from '../../img/更多.png'

class Demo extends React.Component{
    constructor(){
        super()
        this.state={
          a:'',
          distance:'',
          user:'',
          nickname:'',
          hotComments:[],
          i:[], 
        }
      }
    componentWillMount(){
        let {search}=this.props.location
        let aa= search.replace(/\?/g,"");
        fetch(`http://106.12.79.128:666/video/url?id=${aa}`)
        .then(body=>body.json())
        .then(res=>{
            this.setState({
              a:res.urls[0].url
            })
        })
        fetch(`http://106.12.79.128:666/video/detail?id=${aa}`)
        .then(body=>body.json())
        .then(res=>{
            this.setState({
              user:res.data,
              nickname:res.data.creator.nickname
            })
            console.log(res.data.creator.nickname)
        })
        fetch(`http://106.12.79.128:666/comment/video?id=${aa}`)
        .then(body=>body.json())
        .then(res=>{
            this.setState({
                hotComments:res.hotComments,
            })
            console.log(res.hotComments)
        })
        // 相关推荐视频
        // fetch(`http://106.12.79.128:666/related/allvideo?id=${aa}`)
        // .then(body=>body.json())
        // .then(res=>{
        //     this.setState({
        //       user:res.data,
        //     })
        //     console.log(res.data)
        // })
    }
    goBack(){
        this.props.history.goBack();
    }
    deleteItem (i, list) {
        list.forEach((item,index)=>{
            if(item==i){
                return list.splice(index,1)
            }
        })
    }
    dianzan(index){
        let res=this.state.i.filter(item=>item===index)
        if(res.length!=[]){
            this.deleteItem(index,this.state.i)
            this.setState({})
            // console.log(this.state.i)
            return
        }
        this.state.i.push(index)
        // console.log(this.state.i)
        this.setState({})
    }

    render(){
        return(
            <div className={Css.moreBody}>
                <div className={Css.moreFanhui}>
                    <img className={Css.moreFanhuiImg} src={Fanhui} alt="" onClick={this.goBack.bind(this)}/>
                    <p className={Css.moreFanhuiP}>精彩视频</p>
                </div>

{/* ******************************* */}
                <div className={Css.moreDiv}>
                    <div className={Css.myxuser}>
                        <img src={this.state.user.avatarUrl} alt="" className={Css.myxusertouxiang}/>
                        <p className={Css.myxusername}>{this.state.nickname}</p>
                        <div className={Css.myxusersmore}>
                            <img src={Dianzan} alt="" className={Css.myxuserdianzan}/>
                            <img src={Pinglun} alt="" className={Css.myxuserpinglun}/>
                            <img src={More} alt="" className={Css.myxusermore}/>
                        </div>
                    </div>
                    <video className={Css.moreDivvideo} src={this.state.a}
                        //  autoPlay='autoPlay' muted 
                        controls
                         poster={this.state.user.coverUrl}>
                    </video>
                     <div className={Css.moreDivTitle}>
                         {/* <p className={Css.moreDivTitleP}> {this.state.user.title} </p> */}
                         <p className={Css.moreDivTitleP}> {this.state.user.description} </p>
                     </div>
                </div>

                <div className={Css.suibian}></div>

                <div className={Css.pinglun}>
                    <p className={Css.pinglunP}>精彩评论</p>
{/* *************************评论************************************** */}
                {this.state.hotComments.map((item,index)=>{
                    return(
                        <div key={index}>
                            <div className={Css.pinglunTitle}>
                                <div className={Css.pinglunPdetail}>
                                    <img src={item.user.avatarUrl} alt="" className={Css.myxusertouxiang}/>
                                    <p className={Css.myxusername}>{item.user.nickname}</p>
                                    <div className={Css.pinlunright}>
                                        <p className={this.state.i.filter(item=>item===index).length!==0?Css.pinlundianzanCountdianji:Css.pinlundianzanCount}>
                                            {this.state.i.filter(item=>item===index).length!==0?item.likedCount+1:item.likedCount}
                                        </p>
                                        <img src={this.state.i.filter(item=>item===index).length!==0?Dianzanhou:Dianzan} alt="" className={Css.pinlundianzan} onClick={this.dianzan.bind(this,index)}/>
                                    </div>
                                </div>
                            </div>
                            <div className={Css.pinglunContent}>
                                <p className={Css.pinglunContentP1}>{item.content}</p>
                                <p className={Css.pinglunContentP2}>62条回复 ></p>
                            </div>
                        </div>
                        )
                    })
                }
                </div>
            </div>
        )
    }
}

export default Demo